@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;
@use "@styles/mixins/namespace" as *;

@include b(code-mirror) {
  position: relative;
  width: var(--cm-width);
  height: var(--cm-height);
  max-height: var(--cm-max-height);
  font-size: var(--cm-font-size);

  @include is(fullscreen) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: cssVar(bg-color);
  }

  // CodeMirror 实际高度
  :deep(.cm-editor) {
    height: 100%;
  }

  :deep(.cm-editor.cm-focused) {
    outline: none;
    box-shadow: 0 0 0 1px cssVar(color-primary);
  }

  /* a 编辑器高亮行背景色 */
  :deep(.ͼ1.cm-merge-a .cm-changedLine, .ͼ1 .cm-deletedChunk) {
    background-color: var(--cm-a-highlight-line-bg-color);
  }

  /* b 编辑器高亮行背景色 */
  :deep(.ͼ1.cm-merge-b .cm-changedLine) {
    background-color: var(--cm-b-highlight-line-bg-color);
  }

  /* a 编辑器高亮文字背景色 */
  :deep(.ͼ2.cm-merge-a .cm-changedText, .ͼ2 .cm-deletedChunk .cm-deletedText) {
    background-color: var(--cm-a-highlight-text-bg-color);
  }

  /* b 编辑器高亮文字背景色 */
  :deep(.ͼ2.cm-merge-b .cm-changedText) {
    background-color: var(--cm-b-highlight-text-bg-color);
  }

  :deep(.cm-mergeView) {
    height: 100%;
  }

  @include e(header) {
    display: flex;
    align-items: stretch;

    @include m(left) {
      flex-grow: 1;
      flex-basis: 0;
      padding: 8px 11px;
      text-align: center;
      background-color: var(--cm-bg-color);
      border: 1px solid var(--cm-border-color);
    }

    @include m(right) {
      flex-grow: 1;
      flex-basis: 0;
      padding: 8px 11px;
      text-align: center;
      background-color: var(--cm-bg-color);
      border: 1px solid var(--cm-border-color);
    }
  }

  @include e(fullscreen-btn) {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1999;

    @include el-joins(button) {
      width: 24px;
      height: 24px;

      @include el-joins(icon) {
        font-size: 16px;
      }
    }
  }
}
